<!--
<div class="box"> &lt;!&ndash;容器&ndash;&gt;
  <div class="item" style="order: 10">1</div> &lt;!&ndash;子项&ndash;&gt;
  <div class="item" style="order: 10;flex-basis:30%">2</div>
  <div class="item" style="order: 10">3</div>
  <div class="item" style="order: 10">4</div>
  <div class="item" style="order: 10">5</div>
  <div class="item" style="order: 10">6</div>
  <div class="item" style="order: 10">7</div>
  <div class="item" style="order: 10">1</div> &lt;!&ndash;子项&ndash;&gt;
  <div class="item" style="order: 10">2</div>
  <div class="item" style="order: 10">3</div>
  <div class="item" style="order: 10">4</div>
  <div class="item" style="order: 10">5</div>
  <div class="item" style="order: 10">6</div>
  <div class="item" style="order: 10">7</div>
</div>
<div>
  <p>order: 该属性用来指定Flex子项的排列顺序，数值越小，越靠前，可以为负数 取值：数值，默认值为0</p>
  <p>flex-grow: 用来指定Flex子项的扩展比例，不可以为负数，Flex容器会根据Flex子项设置的扩展比例作为比率来分配剩余空间
    取值：数值，默认值为0，表示即使存在剩余空间，Flex子项也不会扩展</p>
</div>
-->
<div class="container">
  <div class="box">
    <div class="header">header</div>
    <div class="content">
      <div class="content_body">
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="content_footer">footer</div>
    </div>
  </div>
</div>
